<template>
  <el-container>
    <el-header class="postPageHeader">
      <el-page-header @back="goBack" content="发帖页面">
      </el-page-header>
    </el-header>
    <div class="post-view">
      <el-form ref="form" :model="article" :rules="rules" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="article.title"></el-input>
        </el-form-item>
        <el-form-item label="分类" prop="category">
          <el-select v-model="article.category" placeholder="请选择">
            <el-option v-for="category in categories" :key="category.moduleId" :label="category.moduleName"
              :value="category.moduleName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input type="textarea" :autosize="{ minRows: 10, maxRows: 20 }" v-model="article.content"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">发布</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

  </el-container>
</template>

<script>
export default {
  data() {
    return {
      article: {
        title: '',
        category: '',
        content: '',
      },
      categories: [], // 从后端获取的分类列表

      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
        ],
        category: [
          { required: true, message: '请选择分类', trigger: 'change' },
        ],
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' },
        ],
      },
    };
  },
  mounted() {
    // 在页面加载时获取后端的分类列表
    this.getCategories();
  }, created() {
    this.userId = this.$route.params.userId;
    this.userName = this.$route.params.userName;
    this.backPage = this.$route.params.backPage;
  },
  methods: {
    goBack() {
      this.$router.push({ name: this.backPage, params: { userId: this.userId, userName: this.userName } });
    },
    // 获取分类列表
    getCategories() {
      // 调用后端接口获取分类列表
      this.$axios.get('https://localhost:44300/api/Module/getAll', {
        params: {
          UserId: this.userId,
          title: this.article.title
        }
      })
        .then(response => {
          this.categories = response.data.response;
        })
        .catch(error => {
          console.error(error);
        });
    },
    // 提交表单
    submitForm() {
      this.$axios.get('https://localhost:44300/api/Post/InsertArticle', {
        params: {
          userId: this.userId,
          title: this.article.title,
          module: this.article.category,
          content: this.article.content
        }
      })
        .then(response => {
          if (response.data.success === true) {
            console.log(this.userId);
            this.$message({
              message: '发布成功',
              type: 'success'
            });
          } else {
            this.$message({
              message: response.data.msg,
              type: 'error'
            });
          }
        })
        .catch(error => {
          console.error(error);
        });
    },
    // 重置表单
    resetForm() {
      this.$refs.form.resetFields();
    },
  },
};
</script>

<style>
.post-view {
  width: 65%;
  margin: 0 auto;
  padding: 20px;
  background-color: #f7f7f7;
  border-radius: 5px;
  box-shadow: 0 0 10px #aaa;
  margin-bottom: 20px;
}
</style>